<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h3>当前number的值：{{nmuber}}</h3>
    <button @click="add">单击number+1</button>
    <button @click="getStudentName">单击获取学生名传递给APP</button>
    <button @click="unbind">解绑自定义atbian事件</button>
    <button @click="deach">点击销毁当前vueComponent</button>
  </div>
</template>

<script>

export default {
    name:'Student',
    data() {
        return {
            name:'彼暗',
            sex:'男 ',
            nmuber:0

        }
    },
    methods:{
      add(){
        console.log('numebr单击事件被调用了');
        this.nmuber++;
      },
      getStudentName(){
        // 触发Student实例身上的 atbian 事件
        this.$emit('atbian',this.name,100,200)
        // this.$emit('demo')
        // this.$emit('click')  // 传递的原生事件没有使用 native 修饰，Vue认为是自定义事件，需要手动触发
      },
      unbind(){
        this.$off('atbian') // 解绑一个自定义事件
        console.log('atbian事件被解绑');
        // this.$off(['atbian','demo']) // 解绑多个自定义事件
        // this.$off() // 解绑所有自定义事件
      },
      deach(){
        this.$destroy() // 销毁了当前Student组件的实例。销毁后所有Student实例的自定义事件全都不奏效
      },
    
    }


}
</script>

<!-- scoped 所有的样式只在当前组件的模板中有效 -->
<style scoped>
  .student{
    background-color: orange;
  }
</style>
